<script setup>
import { ref, onMounted, watch } from 'vue';
import { queryPageApi, saveClazzApi, queryClazzByIdApi,updateClazzApi } from "@/api/clazz";
import { ElMessage,ElMessageBox } from 'element-plus';
import { queryAllEmpApi } from '@/api/emp';
import { deleteClazzApi } from '../../api/clazz';
const searchClazz = ref({
  name: '',
  begin: '',
  end: '',
  date: []
})

//班级列表
const clazzList = ref([]);
//当前页码
const page = ref(1);
//每页显示条数
const pageSize = ref(5);
//总条数
const total = ref(0);
//当前页码变化执行
const handleCurrentChange = () => {
  search();
}
//每页展示条数变化执行
const handleSizeChange = () => {
  search();
}

//侦听搜索日期的变化  
watch(() => searchClazz.value.date, (newValue, oldValue) => {
  console.log('侦听搜索日期的变化执行了');
  console.log(newValue);
  if (newValue && newValue.length > 0) {
    searchClazz.value.begin = newValue[0];
    searchClazz.value.end = newValue[1];
  } else {
    searchClazz.value.begin = '';
    searchClazz.value.end = '';
  }
}
)
//分页查询方法
const search = async () => {
  const result = await queryPageApi(searchClazz.value.name, searchClazz.value.begin, searchClazz.value.end, page.value, pageSize.value)
  if (result.code) {
    clazzList.value = result.data.rows;
    total.value = result.data.total;
  }
}
//钩子函数
onMounted(() => {
  search();
  queryAllEmp();
})
//清空方法
const clean = () => {
  searchClazz.value = { name: '', begin: '', end: '', date: [] }
  search();
}

//是否展示对话框
const dialogFormVisible = ref(false);
//对话框标题
const diaTitle = ref('');
//对话框的班级对象
const clazz = ref({
  id: '',
  name: '',
  room: '',
  beginDate: '',
  endDate: '',
  masterId: '',
  subject: '',
})

//新增班级按钮点击事件
const add = () => {
  clazz.value = {
    id: '',
  name: '',
  room: '',
  beginDate: '',
  endDate: '',
  masterId: '',
  subject: '',
  }
  diaTitle.value = '新增班级';
  dialogFormVisible.value = true;
}
//对话框保存按钮点击事件
const save = async () => {
  let result;
  if(clazz.value.id){
    //修改
     result = await updateClazzApi(clazz.value);
  }else{
    //增加
     result = await saveClazzApi(clazz.value);
  }
  if (result.code) {
    ElMessage.success(result.message); 
    dialogFormVisible.value = false;
    search();
  } else {
    ElMessage.error(result.message)
  }
}
//查询所有员工
const empList = ref([]);
const queryAllEmp = async () => {
  const result = await queryAllEmpApi();
  if (result) {
    empList.value = result.data;
  }
}
//编辑按钮点击事件
const edit =async (id) => {
  //查询回显
  // console.log('--------------------'+id);

  diaTitle.value = '修改班级';
  dialogFormVisible.value = true;
  const result = await queryClazzByIdApi(id);
  if (result.code) {
    clazz.value = result.data;
  }

}

//删除班级
const deleteClazz = (id)=>{
  ElMessageBox.confirm(
    '您确定要删除班级吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      const result = await deleteClazzApi(id);
      if(result.code){
        ElMessage.success(result.message);
        search();
      }else{
        ElMessage.error(result.message);
      }

    })
    .catch(() => {
      ElMessage.info("操作取消")
    })
}
</script>

<template>
  <h1>班级管理</h1>


  <!--搜索栏-->
  <div class="header">
    <el-form :inline="true" :model="searchClazz" class="demo-form-inline">
      <el-form-item label="班级名称">
        <el-input v-model="searchClazz.name" placeholder="请输入班级名称" clearable />
      </el-form-item>
      <el-form-item label="结课时间">
        <el-date-picker v-model="searchClazz.date" type="daterange" range-separator="至" start-placeholder="开始时间"
          end-placeholder="结束时间" value-format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="info" @click="clean">清空</el-button>
      </el-form-item>
    </el-form>
  </div>

  <el-button type="primary" @click="add">+新增班级</el-button>

  <!--表格-->
  <div class="table">
    <el-table :data="clazzList" border style="width: 100%">
      <el-table-column type=index label="序号" width="80" align="center" />
      <el-table-column prop="name" label="班级名称" width="200" align="center" />
      <el-table-column prop="room" label="班级教室" width="100" align="center" />
      <el-table-column prop="masterName" label="班主任" width="100" align="center" />
      <el-table-column prop="beginDate" label="开课时间" align="center" />
      <el-table-column prop="endDate" label="结课时间" align="center" />
      <el-table-column prop="status" label="状态" width="100" align="center" />
      <el-table-column prop="updateTime" label="最后操作时间" align="center" >
        <template #default="scope">
          {{ scope.row.updateTime.replace('T','  ') }}
        </template>
      </el-table-column>

      <el-table-column prop="address" label="操作" align="center">
        <template #default="scope">
          <el-button size="small" type="primary" @click="edit(scope.row.id)">编辑 </el-button>
          <el-button size="small" type="danger" @click="deleteClazz(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!--分页条-->
  <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 30]"
    background="true" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />

  <!--增添员工与修改员工的对话框-->
  <el-dialog v-model="dialogFormVisible" :title="diaTitle" width="500">

    <el-form :model="clazz">
      <el-form-item label="班级名称" label-position="right">
        <el-input v-model="clazz.name" placeholder="请输入班级名称" />
      </el-form-item>

      <el-form-item label="班级教室" label-position="right">
        <el-input v-model="clazz.room" placeholder="请输入班级教室名称" />
      </el-form-item>

      <el-form-item label="开课时间" label-position="right">
        <el-date-picker v-model="clazz.beginDate" type="date" placeholder="请选择开课时间" style="width: 100%" />
      </el-form-item>

      <el-form-item label="结课时间" label-position="right">
        <el-date-picker v-model="clazz.endDate" type="date" placeholder="请选择开课时间" style="width: 100%" />
      </el-form-item>

      <el-form-item label="班主任为" label-position="right">
        <el-select placeholder="请选择" style="width: 100%" v-model="clazz.masterId">
          <el-option v-for="emp in empList " :label="emp.name" :value="emp.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="学科名称" label-position="right">
        <el-select placeholder="请选择" style="width: 100%" v-model="clazz.subject">
          <el-option label="java" value="1" />
          <el-option label="前端" value="2" />
          <el-option label="大数据" value="3" />
          <el-option label="Python" value="4" />
          <el-option label="Go" value="5" />
          <el-option label="嵌入式" value="6" />
        </el-select>
      </el-form-item>
    </el-form>



    <el-row class="row-bg" justify="space-evenly">
      <el-col :span="8">
        <el-button type="primary" @click="save" style="width: 100px;">保存</el-button>
      </el-col>
      <el-col :span="8">
        <el-button type="info" @click="quxiao" style="width: 100px;">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>


<style scoped>
.header {
  margin: 20px 0;
}

.table {
  margin: 20px 0;
}
</style>